<!--根组件,用来装所有的组件,比如登录或者admin后台-->


<template>
    <!-- 通常编写组件的html结构，注意vue2.0中一定要有一个根元素 -->
    <div class="arttmpl">
        <!-- 面包屑 -->
        <el-row>
            <el-col :span='24'>
                <div class="abread bt-line">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/admin' }">购物商城</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/admin/goodslist' }">商品列表</el-breadcrumb-item>
                        <el-breadcrumb-item>商品新增</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-col>
        </el-row>
        <!-- 表单内容 -->
        <el-row>
            <el-col :span='24'>
                <!-- 
                    :model="form" //在是一个对象,管理着整个表单的内容
                    prop="title"
                    v-model="form.title"
                    :rules="rulesgz"  //验证规则,在data里面写,他是一个对象
                   -->
                <el-form :model="form" :rules="rulesgz" ref="refruleForm" label-width="100px" class="demo-ruleForm">
                    <el-row>
                        <el-col :span='10'>
                            <el-form-item label="内容标题" prop="title">
                                <!-- prop 属性,是需要验证的时候,这个必须加上 -->
                                <el-input v-model="form.title"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span='10'>
                            <el-form-item label="幅标题" prop="sub_title">
                                <el-input v-model="form.sub_title"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span='6'>
                            <!-- 下拉选框 -->
                            <el-form-item label="所属类别" prop="category_id">
                                <el-select v-model="form.category_id" placeholder="请选择">
                                    <el-option v-for="cate in categorylist" :key="cate.category_id" :label="cate.title" :value="cate.category_id">
                                        <span v-for='a in (cate.class_layer-1)'>&nbsp;&nbsp;</span>
                                        <span v-if='cate.class_layer>1'>|-</span>
                                        <span v-text='cate.title'></span>
                                        <!-- 
                                      <el-option>如果这里有东西,会覆盖:label绑定的数据</el-option>

                                     -->
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span='4' :push='2'>
                            <!--:push='2'  要用冒号,否则报错  -->
                            <el-form-item label="是否发布">
                                <el-switch v-model="form.status" on-text="是" off-text="否">
                                </el-switch>
                            </el-form-item>
                        </el-col>
                        <el-col :span='8' :push='4'>
                            <el-form-item label="推荐类型">
                                <el-switch v-model="form.is_slide" on-text="轮播图" off-text="轮播图" :width='80'>
                                </el-switch>
                                <el-switch v-model="form.is_top" on-text="置顶" off-text="置顶">
                                </el-switch>
                                <el-switch v-model="form.is_hot" on-text="推荐" off-text="推荐">
                                </el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>


                    <!-- 图片上传 -->
                    <el-row>
                        <!-- 封面上传 -->
                        <el-col :span='10'>
                            <el-form-item label="上传封面">
                                <el-upload class="upload-demo" action="http://157.122.54.189:9095/admin/article/uploadimg" :file-list="form.imgList" list-type="picture"
                                    :on-success='imgUpload'>
                                    <el-button size="small" type="primary">点击上传</el-button>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                        <!-- 相册上传 -->
                        <el-col :span='10' :push='4' >
                            <el-form-item label="图片相册" >
                                <el-upload class="upload-demo" action="http://157.122.54.189:9095/admin/article/uploadfile" :file-list="form.fileList" list-type="picture"
                                    :on-success='fileUpload'>
                                    <el-button size="small" type="primary">点击上传</el-button>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 其他数字选项 -->
                    <el-row>
                        <el-col :span='6'>
                            <el-form-item label="商品货号" prop="goods_no">
                                <el-input v-model="form.goods_no"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span='6'>
                            <el-form-item label="库存数量" prop="stock_quantity">
                                <el-input v-model="form.stock_quantity"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span='6'>
                            <el-form-item label="市场价格" prop="market_price">
                                <el-input v-model="form.market_price"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span='6'>
                            <el-form-item label="销售价格" prop="sell_price">
                                <el-input v-model="form.sell_price"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 内容摘要 -->
                    <el-row>
                        <el-col :span='24'>
                            <el-form-item label="内容摘要" prop="zhaiyao">
                                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="form.zhaiyao">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 详细内容 富文本编辑器 -->
                    <!-- 
                          cnpm install vue-quill-editor -S  安装  

                       -->
                    <el-row>
                        <el-col :span='24'>
                            <el-form-item label="详细内容" prop="content">
                                <quill-editor v-model="form.content"> </quill-editor>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 提交按钮 -->
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('refruleForm')">提交</el-button>
                        <el-button @click="resetForm('refruleForm')">重置</el-button>
                    </el-form-item>

                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    // 引入富文本编辑器组件  
    import {
        quillEditor
    } from 'vue-quill-editor'


    // es6的export default{ 写法等同于 module.exports={
    export default {
        // 使用富文本编辑器私有组件,放在data上面
        components: {
            quillEditor
        },


        // es6的写法 data() 等同于es5的 data:function()
        data() {

            //自定义验证规则--> 数字验证
            var checkNum = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('不能为空'));
                }

                // 判断是否是数字
                if (isNaN(value)) {
                    return callback(new Error('请输入数字'));
                } else {
                    callback();
                }
            };


            return {
                form: {
                    title: '', //标题
                    sub_title: '', //副标题
                    category_id: '', //分类id
                    status: true, //是否发布
                    is_slide: true, //轮播图
                    is_top: true, //置顶
                    is_hot: true, //推荐
                    imgList: [], //封面图片
                    fileList: [], //相册图片
                    goods_no: '', //商品货号
                    stock_quantity: 0, //库存数量
                    market_price: 0, //市场价格
                    sell_price: 0, //销售价格
                    zhaiyao: '', //摘要
                    content: '', //详细内容




                },
                rulesgz: { //验证规则
                    title: [{ //一个输入框,可以有多个验证对象
                        required: true, // 必填
                        message: '请输入内容标题',
                        trigger: 'blur' //失去焦点验证
                    }, {
                        min: 3, //最小长度
                        max: 500, //最大长度
                        message: '长度在 3 到 500 个字符',
                        trigger: 'blur' //失去焦点验证
                    }],
                    sub_title: [{ //一个输入框,可以有多个验证对象
                        required: true, // 必填
                        message: '请输入副标题',
                        trigger: 'blur' //失去焦点验证
                    }],
                    stock_quantity: [{
                        validator: checkNum,
                        trigger: 'blur'
                    }],
                    market_price: [{
                        validator: checkNum,
                        trigger: 'blur'
                    }],
                    sell_price: [{
                        validator: checkNum,
                        trigger: 'blur'
                    }],
                    zhaiyao: [{
                        required: true,
                        message: '请输入摘要',
                        trigger: 'blur'
                    }],
                    content: [{
                        required: true,
                        message: '详细内容不能为空',
                        trigger: 'blur'
                    }]
                },
                categorylist: [], //存分类信息的数组
            }
        },
        created() {

            //调用获取分类下拉列表
            this.getcate();
            // 调用编辑数据回显
            this.getlist();

        },
        mounted() {

        },
        methods: {
            // 获取数据回显
            getlist() {
                var url = '/admin/goods/getgoodsmodel/' + this.$route.params.id;
                this.$http.get(url).then(res => {
                    if (res.status == 1) {
                        return this.$message.error(res.message);
                    }
                    // 成功
                    this.form = res.data.message;
                })
            },
            // 相册图片上传
            fileUpload(response, file, fileList) {
                this.form.fileList.push(response);
            },
            //封面图片上传
            imgUpload(response, file, fileList) {
                // fileList 的值就是当前上传的所有图片
                // file  的值就是当前上传图片的返回对象
                // response 档次响应对象
                // 将服务器响应回来的数据对象增加到 form.imgList数组中即可
                // console.log(response);
                // console.log(file);
                // console.log(fileList);
                this.form.imgList = [response]; //因为这个只有一张
            },
            // 获取分类下拉列表
            getcate() {
                var url = '/admin/category/getlist/goods';
                this.$http.get(url).then(res => {
                    if (res.data.status != 0) {
                        this.$message.error('服务器出问题了哦!'); //饿了么里面的消息提示
                        return false;
                    } else { //成功
                        this.categorylist = res.data.message;
                        // console.log(this.categorylist);
                    }
                })
            },
            //数据提交按钮
            submitForm(refruleForm) {
                this.$refs[refruleForm].validate((valid) => { //valid  验证成功,这个参数为true, 失败为false
                    if (valid) {
                        // 成功后,用axios提交数据到后台
                        // alert('submit!');
                        console.log(this.form);
                        // var url = '/admin/goods/add/goods';
                        var url = '/admin/goods/edit/' + this.$route.params.id;
                        this.$http.post(url, this.form).then(res => {
                            if (res.data.status == 1) {
                                this.$message.error(res.data.message);
                                return;
                            }
                            // 数据新增成功以后跳转到商品列表页面
                            // 利用vue-router的编程式导航实现页面的跳转
                            this.$router.push({
                                'name': 'goodslist'
                            });
                        })
                    } else {

                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //重置表单
            resetForm(refruleForm) {
                this.$refs[refruleForm].resetFields();
            }
        }
    }
</script>

<style scoped>
    .demo-ruleForm {
        margin-top: 10px;
    }
</style>


<!--
<style></style>  中的样式是全局的
<style scoped></style> 中的样式是当前组件的

-->